<template>
	<form-frame v-model="visible" title="敏感词" width="640" :type="formType" :loading="btnLoading" @submit="handleSubmitForm()">
		<el-form ref="form" size="medium" :model="formData" :rules="formRules" label-width="66px" v-loading="loading">
			<el-form-item label="敏感词" prop="names">
				<el-select v-model="formData.names" v-bind="selectConfig" class="sensitive_select"></el-select>
				<p class="sensitive_tips">输入一个敏感词回车确定，可以进行多个敏感词的批量加入</p>
			</el-form-item>
		</el-form>
	</form-frame>
</template>

<script>
import formMixins from '@/views/common/formMixins';
import { sensitiveDetail, batchAddedSensitive, updateSensitive } from '@/api/system/tbSysSensitive';
export default {
	mixins: [formMixins],
	data() {
		return {
			formName: '敏感词',
			selectConfig: {
				multiple: true,
				filterable: true,
				allowCreate: true,
				defaultFirstOption: true,
				placeholder: '敏感词名称',
				popperClass: 'sensitive_popper'
			},
			formRules: {
				names: [{ required: true, message: '请输入敏感词', trigger: 'change' }]
			}
		};
	},
	methods: {
		//获取数据详情
		getDataDetail() {
			this.getFormDetail(sensitiveDetail, this.dataId);
		},

		//添加修改请求
		async submitFormRequest() {
			let params = this.formData.names.join();
			this.handleSubmitFunction(params, batchAddedSensitive, updateSensitive);
		}
	}
};
</script>

<style lang="scss" scoped>
.sensitive_select::v-deep {
	width: 100%;
	.el-select__tags {
		max-width: none !important;
	}
	.el-input__suffix {
		display: none;
	}
}
.sensitive_tips {
	line-height: 24px;
	color: #c0c4cc;
}
</style>

<style lang="scss">
.sensitive_popper {
	display: none;
}
</style>
